<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>维保详情</span>
        <el-button
          type="primary"
          style="float: right; padding: 6px"
          icon="el-icon-edit"
          @click="dialogFormVisible = true"
          >变更周期</el-button
        >
      </div>
      <el-table
        :show-header="false"
        :data="tableData"
        border
        :cell-style="columnStyle"
        style="width: 100%"
      >
        <el-table-column width="120" prop="amount0"></el-table-column>
        <el-table-column prop="amount1"></el-table-column>
        <el-table-column width="120" prop="amount2"></el-table-column>
        <el-table-column prop="amount3"></el-table-column>
        <el-table-column width="120" prop="amount4"></el-table-column>
        <el-table-column prop="amount5"></el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>维保记录</span>
        <el-button
          type="primary"
          style="float: right; padding: 6px"
          icon="el-icon-edit"
          @click="dialogFormVisible2 = true"
          >添加记录</el-button
        >
      </div>
      <el-table :data="tableData2" stripe style="width: 100%">
        <el-table-column prop="code" label="编号"> </el-table-column>
        <el-table-column prop="des" label="描述"> </el-table-column>
        <el-table-column prop="appendix" label="附件"> </el-table-column>
        <el-table-column prop="attendant" label="维保人员"> </el-table-column>
        <el-table-column prop="time" label="维保时间"> </el-table-column>
        <el-table-column prop="ope" label="操作"> </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="变更周期" :visible.sync="dialogFormVisible">
      <el-input placeholder="请输入内容" v-model="tableData[1].amount5">
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="添加维保记录" :visible.sync="dialogFormVisible2">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="编号">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="维保人员">
          <el-input v-model="form.ttendant"></el-input>
        </el-form-item>
        <el-form-item label="维保时间">
          <el-date-picker
            type="datetime"
            placeholder="选择日期时间"
            v-model="form.date"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="form.attendant"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.des"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import table1 from "@/components/order/table2.vue";
import table2 from "@/components/order/table3.vue";
export default {
  components: {
    table1,
    table2,
  },
  data() {
    return {
      tableData: [
        {
          amount0: "维保编号",
          amount1: "1",
          amount2: "设备名称",
          amount3: "山东兴湘食品A171127-58",
          amount4: "维保点",
          amount5: "控制系统：控制点监测",
        },
        {
          amount0: "上次维保时间",
          amount1: "2019-09-24 16:09:20",
          amount2: "生成时间",
          amount3: "2019-09-24 16:10:20",
          amount4: "维保周期",
          amount5: "1小时",
        },
        {
          amount0: "维保倒计时",
          amount1: "-4516.3小时",
          amount2: "维保时间类型",
          amount3: "自然时间",
          amount4: "操作指导",
          amount5: "每个控制点进行监测",
        },
      ],
      tableData2: [
        {
          code: "1081",
          des: "hehe",
          appendix: "",
          attendant: "admin",
          time: "2019-09-24 19:08:10",
          ope: "",
        },
        {
          code: "1082",
          des: "xxx",
          appendix: "",
          attendant: "admin",
          time: "2019-09-25 14:09:10",
          ope: "",
        },
      ],
      form: {},
      dialogFormVisible: false,
      dialogFormVisible2: false,
    };
  },
  methods: {
    // 自定义列背景色
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 2 || columnIndex == 4) {
        //第三第四列的背景色就改变了2和3都是列数的下标
        return "background:#f3f6fc;";
      } else {
        return "background:#ffffff;";
      }
    },
    // // 和并列
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 0) {
    //     if (rowIndex % 4 === 0) {
    //       return {
    //         rowspan: 4,
    //         colspan: 1,
    //       };
    //     } else {
    //       return {
    //         rowspan: 0,
    //         colspan: 0,
    //       };
    //     }
    //   }
    // },
    save() {
      console.log(this.$data.form);
      this.$data.tableData2.push({
        code: this.$data.form.code,
        des: this.$data.form.des,
        appendix: "",
        attendant: this.$data.form.attendant,
        time: this.$data.form.date.format("yyyy-MM-dd hh:mm:ss"),
      });
      this.$data.dialogFormVisible2 = false;
    },
  },
};
</script>

<style>
</style>